<template>
  <div style="height: 100%">
    <div class="search">
      <el-row :gutter="50">
        <el-col :span="10">
          <el-input
            v-model="searchInfo.input"
            placeholder="请输入身份证号"
            :span="6"
          />
        </el-col>
        <el-col :span="8">
          <el-date-picker
            v-model="searchInfo.date"
            type="date"
            placeholder="选择一个日期"
          />
        </el-col>
        <el-col :span="6">
          <el-button
            type="primary"
            :icon="Search"
            class="searchBtn"
            @click="search"
            >搜索</el-button
          >
        </el-col>
      </el-row>
      <div class="card" v-show="flag">
        <el-card class="box-card">
          <template #header>
            <div class="card-header">
              <div class="block">
                <el-avatar
                  :size="50"
                  src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
                />
              </div>
              <div>
                <p>{{ arr.length ? arr[0].name : "" }}</p>
                <p>{{ arr.length ? arr[0].idCard : "" }}</p>
              </div>
              <el-button class="button" text @click="close">X</el-button>
            </div>
          </template>
          <div class="demo-collapse">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item
                :name="index + 1"
                v-for="(item, index) in arr"
                :key="index"
              >
                <template #title>
                  <div class="headerCard">
                    <p>{{ item.startTime.city }}→{{ item.endTime.city }}</p>
                    {{ item.date }}{{ item.startTime.time }}至{{
                      item.endTime.time
                    }}
                  </div>
                </template>
                <div class="cardContent">
                  <div>
                    <span
                      >{{ item.startTime.date }}{{ item.startTime.day }}</span
                    >
                    <h5>{{ item.startTime.time }}</h5>
                    <span @click="track(item)">{{ item.startTime.city }}</span>
                  </div>
                  <div>
                    <el-button round>经停信息</el-button>
                    <p :style="{ textAlign: 'center' }">{{ item.car }}</p>
                  </div>
                  <div>
                    <span>{{ item.endTime.date }}{{ item.endTime.day }}</span>
                    <h5>{{ item.endTime.time }}</h5>
                    <span>{{ item.endTime.city }}</span>
                  </div>
                </div>
              </el-collapse-item>
            </el-collapse>
          </div>
        </el-card>
      </div>
    </div>
    <div id="allmap" class="allmap" />
  </div>
</template>
<script setup>
window._AMapSecurityConfig = {
  securityJsCode: "6a7ff8b700a70f58b67a13c1a3c3bd3c",
};
import { BMapLoader } from "@/utils/mapLoader";
import { onMounted, ref, reactive, nextTick, shallowRef } from "vue";
import { Search } from "@element-plus/icons-vue";
import { getDate } from "@/utils/getDate";
import AMapLoader from "@amap/amap-jsapi-loader";
import { defaultAxios } from "@/utils/request.js";
let map = shallowRef(null);

const searchInfo = reactive({
  input: "123456",
  date: "2023-3-30",
});
const activeNames = ref(["1"]);
const arr = ref([]);
const flag = ref(false);
// const initMap = (item) => {
//   nextTick(() => {
//     BMapLoader("mV0DScK1RpX85Q7taHl5hTHYCssKtwHO").then((BMap) => {
//       const map = new BMap.Map("allmap", { enableMapClick: false });
//       map.value = map;
//       map.disableKeyboard(); // 禁用键盘操作地图
//       map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放
//       // 添加中心点和缩放等级，如果不添加，初始化出来页面为白屏
//       const point = new BMap.Point(116.41, 39.91);
//       map.centerAndZoom(point, 12);
//       let zoomCtrl = new BMap.ZoomControl(); // 添加缩放控件

//       let scaleCtrl = new BMap.ScaleControl(); // 添加比例尺控件
//       map.addControl(scaleCtrl);
//       let locationControl = new BMap.LocationControl({
//         // 控件的停靠位置（可选，默认左上角）
//         anchor: BMAP_ANCHOR_TOP_RIGHT,
//         // 控件基于停靠位置的偏移量（可选）
//         offset: new BMap.Size(20, 20),
//       });
//       let p1 = item
//         ? new BMap.Point(item.startTime.option.lng, item.startTime.option.lat)
//         : new BMap.Point(116.41, 39.97);

//       let p2 = item
//         ? new BMap.Point(item.endTime.option.lng, item.endTime.option.lat)
//         : new BMap.Point(113, 28.21);

//       let driving = new BMap.DrivingRoute(map, {
//         renderOptions: { map: map, autoViewport: true },
//       });
//       driving.search(p1, p2);
//       // 将控件添加到地图上
//       map.addControl(locationControl);
//     });
//   });
// };
const initMap = () => {
  AMapLoader.load({
    key: "9c8639210eb0e16177bc51b6d5406bef", // 申请好的Web端开发者Key，首次调用 load 时必填
    plugins: [
      // "AMap.Scale",
      // "AMap.OverView",
      // "AMap.MapType",
      "AMap.Driving",
      // "AMap.Geolocation",
    ], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
  })
    .then((AMap) => {
      map = new AMap.Map("allmap", {
        center: [116.39428, 39.90923], //初始化地图中心点位置
      });
      // map.addControl(new AMap.ToolBar());
      let driving = new AMap.Driving({
        // 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
        policy: AMap.DrivingPolicy.LEAST_TIME,
        map,
      });

      let startLngLat = [116.379028, 39.865042];
      let endLngLat = [113.41, 29.58];

      driving.search(startLngLat, endLngLat, function (status, result) {
        if (status == "complete") {
          console.log(result);
        }
      });
      // 在图面添加比例尺控件，展示地图在当前层级和纬度下的比例尺
      map.addControl(driving);
      // map.addControl(new AMap.Scale());
      // 在图面添加鹰眼控件，在地图右下角显示地图的缩略图
      // map.addControl(new AMap.OverView({ isOpen: true }));

      // 在图面添加类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      // map.addControl(new AMap.MapType());

      // 在图面添加定位控件，用来获取和展示用户主机所在的经纬度位置
      // map.addControl(new AMap.Geolocation());
    })
    .catch((e) => {
      console.log(e);
    });
};
const search = () => {
  defaultAxios
    .get("/search", {
      params: {
        ...searchInfo,
        date: getDate(searchInfo.date),
      },
    })
    .then((res) => {
      flag.value = true;
      arr.value = res;
    });
};

onMounted(() => {
  initMap();
});
const close = () => {
  flag.value = false;
};
const handleChange = (val) => {};
const track = (item) => {
  initMap(item);
  flag.value = false;
};
</script>

<style>
#allmap {
  width: 95%;
  height: 100%;
  overflow: hidden;
}
.search {
  position: absolute;
  left: 250px;
  top: 100px;
  z-index: 100;
}
.searchBtn {
  z-index: 999;
}
.card {
  position: absolute;
  z-index: 100;
  font-size: 16px;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.el-collapse {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: center;
}
.headerCard p {
  height: 20px;
}
.text {
  font-size: 16px;
}

.item {
  margin-bottom: 38px;
}
.el-card__body {
  width: 100%;
  flex: 1;
}
.box-card {
  width: 500px;
  display: flex;
  flex-direction: column;
}
.cardContent {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.el-collapse-item__wrap {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  height: 100px;
  font-size: 20px;
}
.el-collapse-item {
  width: 100%;
}
.demo-collapse {
  height: 100%;
  margin-left: 0;
}
.el-collapse {
  height: 100%;
  display: flex;
  flex-direction: column;
}
</style>
